var users = []

/**
 * 页面加载时读取数据
 */
window.onload = function(){
    var data = localStorage.getItem('users')
    if(data != null){
        users = JSON.parse(data)
    }
    console.log(users);
    show()
}

/**
 * 展示数据
 */
function show() {
    $('tb').innerHTML = '' // 清空内部所有元素

    for (var user of users){
        // 创建tr
        var tr = document.createElement('tr')
        // 创建td
        var tdChk = document.createElement('td')
        var tdName = document.createElement('td')
        var tdAge = document.createElement('td')
        var tdSex = document.createElement('td')
        var tdPhone = document.createElement('td')
        var tdDelete = document.createElement('td')
        // 将数据添加到td中
        var chkDelete = document.createElement('input')
        chkDelete.type = 'checkbox'
        chkDelete.name = 'item'
        chkDelete.onchange = checkItem // 为复选框绑定事件回调函数
        tdChk.appendChild(chkDelete)
        tdName.innerHTML = user.name
        tdAge.innerHTML = user.age
        tdSex.innerHTML = user.sex
        tdPhone.innerHTML = user.phone
        var btnDelete = document.createElement('button')
        btnDelete.innerHTML = '删除'
        btnDelete.id=user.name
        btnDelete.onclick = function(){ // 为按钮绑定点击事件
            console.log(this.id);
        }
        tdDelete.appendChild(btnDelete)
        // 将td添加到tr中
        tr.appendChild(tdChk)
        tr.appendChild(tdName)
        tr.appendChild(tdAge)
        tr.appendChild(tdSex)
        tr.appendChild(tdPhone)
        tr.appendChild(tdDelete)
        // 将tr添加到tbody中
        $('tb').appendChild(tr)
    }
}

/**
 * 简化根据id获取元素
 */
function $(id){
    return document.getElementById(id)
}

/**
 * 添加用户
 */
function addUser(){
    var user = {
        name:$('name').value,
        age:$('age').value,
        sex:$('m').checked ? $('m').value : $('f').value,
        phone:$('phone').value
    }
    users.push(user)
    localStorage.setItem('users',JSON.stringify(users))
    show()


    // 清空表单数据
    $('btnReset').click() // 立即执行点击
}

/**
 * 删除用户
 */
function deleteUser(btn) {
    btn.parentNode.parentNode.remove()
}

/**
 * 从首行删除
 */
function deleteFirst() {
    $('tb').firstElementChild.remove()
}

/**
 * 从末行删除
 */
function deleteLast() {
    $('tb').lastElementChild.remove()
}

/**
 * 实现全选
 */
function checkAll() {
    var items = document.getElementsByName('item')
    for(var item of items){
        item.checked = $('all').checked
    }
}

/**
 * 实现当选中下面所有复选框时自动选中全选
 */
function checkItem() {
    $('all').checked = true

    var items = document.getElementsByName('item')
    for(var item of items){
        if(!item.checked){
            $('all').checked = false
            break
        }
    }
}

/**
 * 删除多个
 */
function deleteMultiple() {
    var items = document.getElementsByName('item')
    for(var i=items.length-1;i>=0;i--){
        if(items[i].checked){
            items[i].parentNode.parentNode.remove()
        }
    }
}



